import '../ui/layui.all'
import cascader from '../ui/extent/cascader'
import './areaNav.css'
import {Cartesian3,HeadingPitchRoll } from 'cesium'; 
const areaNav = function(views){
    this.views = views
    var self = this
    this.data = [
        {
            value: '中国',
            label: '中国',
            children: [
                {
                    value: '黑龙江流域',
                    label: '黑龙江流域',
                },
                {
                    value: '辽河流域',
                    label: '辽河流域'
                }
            ]
        },
        {
            value: '老挝',
            label: '老挝',
            children: [
                {
                    value: '湄公河流域',
                    label: '湄公河流域',
                    children: [
                        {
                            value: '南欧江水系',
                            label: '南欧江水系',
                        }
                    ]
                }
            ]
        },
        {
            value: '越南',
            label: '越南',
        },
        {
            value: '缅甸',
            label: '缅甸',
        },
        {
            value: '柬埔寨',
            label: '柬埔寨',
        }
    ]
    this.temp = '<div class="layui-input-block">'+
        '<input type="text" id="sel-areaNav" class="layui-input" readonly="readonly" placeholder="流域导航">'
    '</div>'
    this.contanner = this._drawWidget()
}
areaNav.prototype={
    openWidget:function(){
        this.contanner.style.display = "block"
    },
    closeWidget:function(){
        this.contanner.style.display = "none"
    },
    initData:function(data){
       this.data = data
       this._bind()
    },
    _drawWidget:function(){
        var dom =  document.createElement("div");
        dom.className = "cesium-widget";
        dom.id="areaNav"
        dom.innerHTML = this.temp;
        var body = document.getElementsByTagName("body")[0];
        body.appendChild(dom);
        this._bind()
        return dom
    },
    _bind:function(){
        var self = this
        var cas= new cascader({
            elem: "#sel-areaNav",
            data: this.data,
            value: ["老挝"],
            success: function (valData,labelData) {
                console.log(valData);
                console.log(labelData);
                if(valData[valData.length-1] == "南欧江水系"){
                    self.flyTo()
                }               
            }
        });
    },
    flyTo:function(){
        //设置照相机位置与朝向、设置home的默认值
        var initialPosition = new Cartesian3.fromDegrees(102.61085438743591, 20.565626853993117, 1200);
        var initialOrientation = new HeadingPitchRoll.fromDegrees(0, -50, 0);//(朝向，俯仰，绕视线轴旋转)
        var homeCameraView = {
            destination: initialPosition,
            orientation: {
                heading: initialOrientation.heading,
                pitch: initialOrientation.pitch,
                roll: initialOrientation.roll
            }
        };
        // Set the initial view
        this.views.camera.flyTo(homeCameraView);
    }
}
export default areaNav